<template>
  <div>
    <div >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>新闻后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>反馈管理</el-breadcrumb-item>
      </el-breadcrumb>
<!--      根据反馈类型查询-->
      <el-form :inline="true" :model="search" class="demo-form-inline"  style="margin-top: 20px;margin-bottom: 0px
      ;">
        <el-form-item label="反馈类型">
          <el-select v-model="search.type" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getFeedbackList">查询</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
<!-- 反馈管理table-->
      <el-table
          :data="tableData"
          border
          stripe
          @selection-change="handleSelectionChange"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column
            prop="type"
            label="反馈类型"
            width="300"
        ></el-table-column>
        <el-table-column
            prop="content"
            label="反馈内容"
            width="300"
        ></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="300"></el-table-column>
        <el-table-column
            prop="createtime"
            label="创建时间"
            width="300"
        ></el-table-column>
        <el-table-column
            label="操作"
        >
          <template slot-scope="scope">
            <el-button
                type="danger"
                @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      分页-->
      <div style="margin-top: 20px">
        <el-pagination
            v-show="total > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.search.pageNum"
            :page-sizes="[3, 5, 7, 9]"
            :page-size="this.search.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>

      </div>
    </div>
  </div>
</template>

<script>
import  {getFeedbackList,deleteFeedback} from "@/api/feedback";

export default {
  data() {
    return {
      options: [{
        value: '1',
        label: '功能建议'
      }, {
        value: '2',
        label: '内容建议'
      }, {
        value: '3',
        label: '其他'
      }],
      total: 0,
      search:{
        pageNum: 1,
        pageSize: 7,
      },
      tableData: [{
        id: 1,
        username: 'admin',
        nickname: '管理员',
        email: '',
      }]
    }
  },

  created() {
       this.getFeedbackList();
  },
  methods: {
    reset() {
      this.search = {
        pageNum: 1,
        pageSize: 7,
      }
      this.getFeedbackList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.search.pageSize = val;
      this.getFeedbackList();
    },
    handleCurrentChange(val) {
      this.search.pageNum = val
      this.getFeedbackList();
      console.log(`当前页: ${val}`);
    },
    //获取反馈列表
    async getFeedbackList() {
        console.log(this.search)
        const res = await getFeedbackList(this.search.type, this.search.pageNum, this.search.pageSize);
        this.tableData = res.records;
        this.total = res.total;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(id) {
      //确定删除？
       this.$confirm('此操作将永久删除该反馈, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
          const res = await deleteFeedback(id);
          console.log(res)
          this.$message({
              type: 'success',
              message: '删除成功!'
          });
          this.getFeedbackList();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  },
}
</script>

<style>

</style>
